<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 15:52:14
 * @FilePath     : \组件\插槽\具名插槽\示例\base-layout.vue
-->
// src/components/base-layout.vue

<template>
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script setup>
import {useSlots} from 'vue'

const slot = useSlots()
/**
 * {
 *  "default": f(),
 *  "header": f(),
 *  "footer": f()
 * }
 */
console.log(slot, 'slot')

 /**
  * [
  *     {
  *         childreen: 'A paragraph for the main content.',
  *         type: "p",
  *         ...
  *     }
  *     {
  *         childreen: 'And another one.',
  *         type: "p",
  *         ...
  *     }
  * ]
  */ 
console.log(slot.default(), 'slot')

console.log(slot.header(), 'slot')

console.log(slot.footer(), 'slot')
</script>